<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
    <title>实现静态生成</title>
</head>

<body>
    <div>
        <h1>无数据和有数据的静态生成</h1>
        <p>如果组件不需要在其他地方获取数据，直接进行静态生成</p>
        <p>如果组件需要在其他地方获取数据，在构建时Next.js会预先获取组件需要的数据，然后再对组件进行静态生成</p>
    </div>
    <div>
        <p>无数据时无须任何操作，使用默认的静态生成即可</p>
        <p>有数据的静态生成需要使用getStaticProps方法</p>
        <p>该方法是一个异步函数，需要在组件内部进行导出</p>
        <p>在开发模式下，getStaticProps改为在每个请求上运行（在list.js文件看例子）</p>
    </div>
</body>

<script>
    export async function getStaticProps() {
        // 从文件系统，API，数据库中获取的数据
        const data = bbb

        // props 属性的值将会传递给组件
        return {
            props: aaa
        }
    }
</script>

</html>